<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>highlight.js developer</title>

  <link rel="stylesheet" href="../src/styles/default.css">

  <style>
    body { padding: 20px;
    font-family: sans-serif;
     }
    .editor textarea {
      display: block; width: 100%;
      height: 15em;
    }
    h3 {
      margin:0 0 0.5em;
      font-size:1.1em;
    }

    pre code,
    pre output {
      display: block;
      padding:20px !important;
    }

    pre output {
      display: block; overflow: auto;
      padding: 0.5em;
      background: #F0F0F0;
    }

    .hljs-debug {
      color: red; font-weight: bold;
    }

    .visible-structure pre code span {
      display: inline-block;
      padding:2px;
      margin: 3px 0;
      border: 1px dashed #777;
      border-radius: 5px;
      white-space: pre;
    }

    .visible-structure pre code span:before {
      display: inline-block;
      content: attr(data-klass);
      font-size: 70%;
      background: #693;
      padding:1px 5px;
      border-radius: 3px;
      color:white;
      margin-right:0.5em;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <div class="editor" id="app">
    <h3>Code</h3>
    <div>
      <textarea>Put code here…</textarea>
      <p>
        <button id="update-highlighting">Update highlighting</button>
        <button id="show-structure">Show/hide structure</button>
        Language: <select class="languages"><option value="">(Auto)</option></select>
        Theme: <select class="theme">
          <option>default.css</option>
          <option>a11y-dark.css</option>
          <option>a11y-light.css</option>
          <option>agate.css</option>
          <option>an-old-hope.css</option>
          <option>androidstudio.css</option>
          <option>arduino-light.css</option>
          <option>arta.css</option>
          <option>ascetic.css</option>
          <option>atelier-cave-dark.css</option>
          <option>atelier-cave-light.css</option>
          <option>atelier-dune-dark.css</option>
          <option>atelier-dune-light.css</option>
          <option>atelier-estuary-dark.css</option>
          <option>atelier-estuary-light.css</option>
          <option>atelier-forest-dark.css</option>
          <option>atelier-forest-light.css</option>
          <option>atelier-heath-dark.css</option>
          <option>atelier-heath-light.css</option>
          <option>atelier-lakeside-dark.css</option>
          <option>atelier-lakeside-light.css</option>
          <option>atelier-plateau-dark.css</option>
          <option>atelier-plateau-light.css</option>
          <option>atelier-savanna-dark.css</option>
          <option>atelier-savanna-light.css</option>
          <option>atelier-seaside-dark.css</option>
          <option>atelier-seaside-light.css</option>
          <option>atelier-sulphurpool-dark.css</option>
          <option>atelier-sulphurpool-light.css</option>
          <option>atom-one-dark-reasonable.css</option>
          <option>atom-one-dark.css</option>
          <option>atom-one-light.css</option>
          <option>brown-paper.css</option>
          <option>codepen-embed.css</option>
          <option>color-brewer.css</option>
          <option>darcula.css</option>
          <option>dark.css</option>
          <option>default.css</option>
          <option>docco.css</option>
          <option>dracula.css</option>
          <option>far.css</option>
          <option>foundation.css</option>
          <option>github-gist.css</option>
          <option>github.css</option>
          <option>gml.css</option>
          <option>googlecode.css</option>
          <option>gradient-dark.css</option>
          <option>grayscale.css</option>
          <option>gruvbox-dark.css</option>
          <option>gruvbox-light.css</option>
          <option>hopscotch.css</option>
          <option>hybrid.css</option>
          <option>idea.css</option>
          <option>ir-black.css</option>
          <option>isbl-editor-dark.css</option>
          <option>isbl-editor-light.css</option>
          <option>kimbie.dark.css</option>
          <option>kimbie.light.css</option>
          <option>lightfair.css</option>
          <option>magula.css</option>
          <option>mono-blue.css</option>
          <option>monokai-sublime.css</option>
          <option>monokai.css</option>
          <option>night-owl.css</option>
          <option>nord.css</option>
          <option>obsidian.css</option>
          <option>ocean.css</option>
          <option>paraiso-dark.css</option>
          <option>paraiso-light.css</option>
          <option>pojoaque.css</option>
          <option>purebasic.css</option>
          <option>qtcreator_dark.css</option>
          <option>qtcreator_light.css</option>
          <option>railscasts.css</option>
          <option>rainbow.css</option>
          <option>routeros.css</option>
          <option>school-book.css</option>
          <option>shades-of-purple.css</option>
          <option>solarized-dark.css</option>
          <option>solarized-light.css</option>
          <option>srcery.css</option>
          <option>stackoverflow-dark.css</option>
          <option>stackoverflow-light.css</option>
          <option>sunburst.css</option>
          <option>tomorrow-night-blue.css</option>
          <option>tomorrow-night-bright.css</option>
          <option>tomorrow-night-eighties.css</option>
          <option>tomorrow-night.css</option>
          <option>tomorrow.css</option>
          <option>vs.css</option>
          <option>vs2015.css</option>
          <option>xcode.css</option>
          <option>xt256.css</option>
          <option>zenburn.css</option>
        </select>
      </p>
    </div>
    <div>
      <h3>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</h3>
      <highlightjs :language="language" :code="code" />
    </div>
    <div>
      <h3>Markup</h3>
      <pre><output>...</output></pre>
    </div>
  </div>

  <script src="../build/highlight.js"></script>
  <script src="../demo/jquery-2.1.1.min.js"></script>
  <script src="../demo/vue.js"></script>

  <script>
    hljs.debugMode();

    function saveSettings() {
      var editor = $("body .editor");
      var language = editor.find('.languages').val();
      var code = editor.find('textarea').val();
      var theme = $(".theme").val();
      SourceStore.save({
        language, code, theme
      })
    }

    $(document).ready(function() {
      var select = $('.languages');
      hljs.listLanguages().forEach(function(l) {
        select.append('<option>' + l + '</option>');
      });

      $(".theme").change(function(e) {
        var css = e.target.value;
        var link = $("link[rel=stylesheet]")[0]
        link.href = `../src/styles/${css}`
        localStorage.setItem(key_THEME, css);
      })

      $('.editor button#update-highlighting').click(function(e) {
        var editor = $(this).parents('.editor');
        var language = editor.find('.languages').val();
        var source = editor.find('textarea').val();
        var start_time = +new Date();
        var result = hljs.getLanguage(language) ? hljs.highlight(language, source, true) : hljs.highlightAuto(source);
        var rendering_time = +new Date() - start_time;
        vue.code = source;
        vue.language = hljs.getLanguage(language) ? language : '';

        var rendering_stats = result.language + ': relevance ' + (result.relevance );
        if (result.second_best) {
            rendering_stats += ', ' + result.second_best.language + ': ' + (result.second_best.relevance || result.second_best.r);
        }
        editor.find('.rendering_stats').text(rendering_stats);
        editor.find('.rendering_time').text(rendering_time);
        editor.find('output').text(result.value);
        saveSettings();
      });

      $('.editor button#show-structure').click(function(e) {
        var editor = $(this).parents('.editor');
        editor.toggleClass('visible-structure');

        localStorage.setItem(key_STRUCTURE, editor.hasClass('visible-structure'));
      });
    });

    var SourceStore;
    var key_CODE = 'hljs-source';
    var key_LANGUAGE = 'hljs-lang';
    var key_THEME = 'hljs-theme';
    var key_STRUCTURE = 'hljs-structure';
    (function(){
      SourceStore = {
        save: function({code, language, theme}){
          localStorage.setItem(key_CODE, code);
          localStorage.setItem(key_LANGUAGE, language);
          localStorage.setItem(key_THEME, theme);
        },
        resolve: function(){
          let code = localStorage.getItem(key_CODE)
          if (!code) return null;

          return {
            code,
            language: localStorage.getItem(key_LANGUAGE),
            theme: localStorage.getItem(key_THEME) || 'default.css',
          };
        }
      };
      $(function(){
        var data = SourceStore.resolve();
        if (!data) return;
        $('.editor textarea').val(data.code);
        $('.editor .languages').val(data.language);
        $('.theme').val(data.theme);
        $('.editor button').first().click();

        if (localStorage.getItem(key_STRUCTURE) === "true") {
          var editor = $('body .editor');
          editor.toggleClass('visible-structure');
        }

        var link = $("link[rel=stylesheet]")[0]
        link.href = `../src/styles/${data.theme}`
      });
    }());

    Vue.use(hljs.vuePlugin);
    let vue = new Vue({
      el: '#app',
      data: { code: "", language: "" },
      methods: {
        refreshKlass: function() {
          // update data-klass post-render for cool class previews
          this.$nextTick(() => {
            $(".hljs span").each((_,el) => {
              $(el).attr("data-klass", el.className.replace("hljs-",""))
            })
          })
        }
      },
      watch: {
        code: function(){
          this.refreshKlass();
        },
        language: function(){
          this.refreshKlass();
        }
      }
    });
  </script>
</body>
</html>
